<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.act{
			background: orange;
		}
		div{
			width: 200px;
			height: 200px;
			background: red;
		}
	</style>
</head>
<body>
	<div>
		<p>666</p>
	</div>
	<script type="text/javascript" src="../jquery-3.2.1.js"></script>
	<script type="text/javascript">
		// 1.创建节点并设置内容
		let p = $("<p>hello</p>").css("color", "red").addClass("act")
		let p2 = $("<p>996</p>")
		let p3 = $("<p>007</p>")
		let p4 = $("<p>888</p>")

		// 2.添加节点 添加到最后
		$("div").append(p)
		p2.appendTo($('div'))

		//添加节点 添加到前面
		$("div").prepend(p3)
		p4.prependTo($("div"))

		// 删除节点=================
		// empty 删除子元素 不包含本身
		// $('div').empty()
		// remove 删除节点 自身和子元素都删除
		// $('div').remoove()
	</script>
</body>
</html>